<template>
  <section>
    <!--start 面包屑-->
    <div class="location">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>资金</el-breadcrumb-item>
        <el-breadcrumb-item>收款确认</el-breadcrumb-item>
      </el-breadcrumb>
     			<help-components>
				<span slot="headText">{{helpData.templateName}}</span>
				<p slot="headDescText" v-html="helpData.templateRemark"></p>
				<div slot="helpContentWrap">
					<div v-for="(item,index) in helpData.questionAndAnswerArray">
						<h3>{{item.templateContent}}</h3>
						<p v-html="item.templateRemark"></p>
					</div>
				</div>
			</help-components>
    </div>
    <!--end 面包屑-->

    <!--start content-->
    <div class="content">
      <!--zijin-conBox   start-->
      <div class="ziJin-conBox">

        <!--头部  start-->
        <div class="zJ-header">
          <div class="public-th clearfix" v-if="vue_selectAllData> 0">
            <em @click="selectAll" class="el-icon-close"></em>
            <span class="selectSpan">已选择<i>{{vue_selectAllData}}</i>项,合计金额：{{vue_row_allMoney}}</span>
            <b class="selectB">|</b>
            <span class="selectSpan" @click='row_batchConfirm'><em class="iconfont">&#xe64e;</em>批量收款确认</span>
          </div>
          <div class="public-th clearfix" v-else>
            <div class="public-left clearfix">
              <div class="goods-input">
                <input type="text" placeholder="请输入客户名称" v-model="fundMerchantListQb.memberName"  @keydown.enter="queryByMemberName"/><i @click="queryByMemberName"></i>
              </div>
            </div>
            <span class="heJi">待确认收款合计：<i>{{fundMerchantListSet.sumInfo.merchantListMoneySum}}</i></span>
          </div>
        </div>
        <!--头部  end-->

        <!--table   start-->
        <el-table
          ref="multipleTable"
          :data="fundMerchantListSet.list"
          tooltip-effect="dark"
          :max-height="vue_tableH"
          style="width: 100%"
          @sort-change="vFun_sort"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="merchantListCode"
            sortable="custom"
            label="流水号"
            width="200">
            <template scope="scope"><span class="goTo" @click="goTo(scope.$index, fundMerchantListSet.list)">{{ scope.row.merchantListCode}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="merchantDateStr"
            label="时间"
            width="200">
          </el-table-column>
          <el-table-column
            prop="memberName"
            sortable="custom"
            label="客户名称"
            width="200">
          </el-table-column>
          <el-table-column
            prop="merchantPayTypeStr"
            label="支付方式"
            width="150">
          </el-table-column>
          <el-table-column
            prop="merchantListMoney"
            sortable="custom"
            label="金额"
            width="150">
          </el-table-column>
          <el-table-column
            prop="merchantSignNo"
            sortable="custom"
            label="收款账户"
            width="200">
          </el-table-column>
          <el-table-column
            prop="merchantListRemarkStr"
            label="摘要"
            min-width="150">
          </el-table-column>

          <el-table-column
          	class-name="noPadding"
            fixed="right"
            label=""
            width="60">
            <template scope="scope">
              <el-popover trigger="hover" class="rightR" placement="bottom">
                <p class="p" @click="goTo(scope.$index, fundMerchantListSet.list)"><em class="iconfont" style="font-size: 15px">&#xe656;</em>详情</p>
                <p class="p" @click="row_batchConfirm('',fundMerchantListSet.list[scope.$index].merchantListCode)"><em class="iconfont" style="font-size: 17px">&#xe6f1;</em>收款确认</p>
                <p class="p" @click="row_delete(scope.$index, fundMerchantListSet.list)"><em class="iconfont">&#xe644;</em>作废</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag><em class="iconfont tab-hover">&#xe607;</em></el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <!--table  end-->

        <!--分页  start-->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="parseInt(fundMerchantListSet.pageTools.pageNo)"
            :page-sizes="fundMerchantListSet.pageTools.pageSizeOptions"
            :page-size="parseInt(fundMerchantListSet.pageTools.pageSize)"
            :total="parseInt(fundMerchantListSet.pageTools.recordCount)"
            layout="total, prev, pager, next, sizes,jumper">

          </el-pagination>
        </div>
        <!--分页  end-->

      </div>
      <!--zijin-conBox   end-->

    </div>
    <!--end content-->
  </section>
</template>


<script>
  import helpComponents from '../../../components/help/help'
	export default {
		components:{helpComponents},
    data(){
      return {
      	vue_selectAllData: '',                 //复选框根据数值判断显示隐藏及选中条数显示
        vue_rechargeMoneySum:0,                //充值总金额
        vue_row_allMoney:null,                 //计算选中总金额的
        vue_merchantListCodeStr:"",            //多选框选中值
        vue_tableH:500,

      	helpData:{
					templateName:"",
					templateRemark:"",
					questionAndAnswerArray:[]
				},

      	fundMerchantListSet:{
      		"list":[],  //数据列表
					"pageTools":{},	//分页数据
					"sumInfo":{}, //汇总信息

      	},
      	fundMerchantListQb:{
      		memberName:"",
      		orderStr:'',
      	},
      }
    },

    methods: {
    	vFun_sort(type){
    		if(type.order==='ascending'){
    			this.fundMerchantListQb.orderStr=type.prop
    		}else if(type.order==='descending'){
    			this.fundMerchantListQb.orderStr=type.prop +' desc'
    		}else{
    			this.fundMerchantListQb.orderStr=''
    		};
    		this.queryByPage();
    	},
//---------------------------点击头部关闭按钮   start------------------
      selectAll(){
        this.$refs.multipleTable.clearSelection()
      },
//---------------------------表格里的复选框操作   start----------------
      handleSelectionChange(val) {
        this.vue_selectAllData = val.length;
        this.vue_row_allMoney = 0;
        val.forEach((item,index,arr)=>{
          this.vue_row_allMoney += parseFloat(item.merchantListMoney)
        })
        this.vue_row_allMoney = this.Public.formatMoney(this.vue_row_allMoney, 2);
        //获取选中值
        this.vue_merchantListCodeStr = "";
				for(let i=0,len=val.length;i<len;i++){
					this.vue_merchantListCodeStr += val[i].merchantListCode+","
				}
				this.vue_merchantListCodeStr = this.vue_merchantListCodeStr.substring(0,this.vue_merchantListCodeStr.length-1);
      },

//---------------------------详情弹出层  start--------------------------
      goTo(index, data){
        const h = this.$createElement;
        this.$msgbox({
          title: '订单付款',
          message: h('div', {style: 'padding:20px;'}, [
              h('p', {style: 'line-height:24px;'}, [
                  h('span', {style: 'color:#96a6b6'}, '金额： '),
                  h('i', {style: 'color: #415161'}, data[index].merchantListMoney)
                ],
              ),
              h('p', {style: 'line-height:24px;'}, [
                  h('span', {style: 'color:#96a6b6'}, '充值方式： '),
                  h('i', {style: 'color: #415161'}, data[index].merchantPayTypeStr)
                ],
              ),
              h('p', {style: 'margin-bottom: 30px;line-height:24px;'}, [
                  h('span', {style: 'color:#96a6b6'}, '备注：'),
                  h('i', {style: 'color: #415161'}, data[index].listRemark)
                ],
              ),
              h('p', {style: 'line-height:24px;'}, [
                  h('span', {style: 'color:#96a6b6'}, '流水号： '),
                  h('i', {style: 'margin-right: 30px;color: #415161'}, data[index].merchantListCode),
                  h('span', {style: 'color:#96a6b6'}, '日期： '),
                  h('i', {style: 'color: #415161'}, data[index].merchantDateStr)
                ],
             ),
            ],
          ),
          customClass: "dDFk",
          showCancelButton: true,
          confirmButtonText: '确定',
          showCancelButton: false
        }).then(action => {

        });
      },
//---------------------------收款审核弹出层   start---------------------
      confirm:function(index, data){
        const h = this.$createElement;
        this.$msgbox({
          title: '审核',
          message: h('div', {style: 'padding:20px;'}, [
              h('p', {style: 'text-align: center;font-size: 16px;color: #415161;text-align: center;line-height: 24px;margin-bottom: 8px;'}, '是否审核通过该笔充值款项？'),
              h('p', {style: 'text-align: center;color:#96a6b6;line-height: 24px;'}, '客户名称：' + data[index].memberName),
              h('p', {style: 'text-align: center;color:#96a6b6;line-height: 24px;'}, '金额：' + data[index].merchantListMoney),
              h('p', {style: 'text-align: center;color:#96a6b6;line-height: 24px;'}, '充值方式：' + data[index].merchantPayTypeStr),
            ],
          ),
          customClass: "surePay clearfixBox",
          cancelButtonClass: 'fr',
          confirmButtonClass: 'fr',
          showCancelButton: true,
          confirmButtonText: '确定',
        }).then(action => {
          if (action === 'confirm'){
            this.axios({
              method: 'patch',
              url: "/v3/fund/merchantLists/"+data[index].merchantListCode+"/confirm",
            }).then((res) => {
                this.Public.openSuccess(this,"操作成功！");
                this.queryByPage();
            }).catch((err)=>{
					      this.Public.openError(this,err.response.data)
				    });
          }
        });
      },
//---------------------------收款删除弹出层   start---------------------
      row_delete(index, data){
        const h = this.$createElement;
        this.$msgbox({
          title: '确认',
          message: h('div', {style: 'padding:20px;'}, [
              h('p', {style: 'text-align: center;font-size: 16px;color: #415161;text-align: center;line-height: 24px;margin-bottom: 8px;'}, '是否确认删除该笔充值记录？'),
              h('p', {style: 'text-align: center;color:#96a6b6;line-height: 24px;'}, '客户名称：' + data[index].memberName),
              h('p', {style: 'text-align: center;color:#96a6b6;line-height: 24px;'}, '金额：' + data[index].merchantListMoney),
              h('p', {style: 'text-align: center;color:#96a6b6;line-height: 24px;'}, '充值方式：' + data[index].merchantPayTypeStr),
            ],
          ),
          customClass: "surePay clearfixBox",
          cancelButtonClass: 'fr',
          confirmButtonClass: 'fr',
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(action => {
          if (action === 'confirm') {
            this.axios({
              method: 'delete',
              url: "/v3/fund/merchantLists/"+data[index].merchantListCode,
              data: {}
            }).then((res) => {
                this.Public.openSuccess(this,"操作成功！");
                this.queryByPage();
            }).catch((err)=>{
					      this.Public.openError(this,err);
				    });
          }
        });
      },
//-----------------批量审核  start---------------------------
      row_batchConfirm(batchFlag,merchantListCode){
      	if(batchFlag == ""){
      		this.vue_merchantListCodeStr = merchantListCode;
      	}
          const h = this.$createElement;
      	  this.$confirm('确认收款确认？', '确认', {
          message: h('span', {style: 'padding:20px;'},"确认收款确认?"),
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					cancelButtonClass: "fr",
					confirmButtonClass: "fr",
					customClass: "clearfixBox"
				}).then(() => {
					//点击确定的回调
					this.axios({
						method: "PATCH",
						url: "/v3/fund/merchantLists/"+this.vue_merchantListCodeStr+"/batchConfirm",
						data: {}
					}).then((res) => {
							this.Public.openSuccess(this,"操作成功！");
              this.queryByPage();
					}).catch((err)=>{
				      this.Public.openError(this,err.response.data)
			    });
				}).catch((err)=>{
			      this.Public.openError(this,err.response.data)
		    });
     },
//---------------------------分页     start---------------------------
      handleSizeChange(val) {
        this.fundMerchantListSet.pageTools.pageSize = val;
      	this.queryByPage();
      },
      handleCurrentChange(val) {
        this.fundMerchantListSet.pageTools.pageNo= val;
      	this.queryByPage();
      },
//---------------------------根据客户名称进行查询------------------------
      queryByMemberName() {
      	this.fundMerchantListSet.pageTools = this.$store.state.page;
      	this.queryByPage();
        this.fundMerchantListQb.memberName = "";
      },
//--------------查询收款待确认列表数据-----------------------------------
      queryByPage(){
      		this.axios({
						method: 'post',
						url: "/v3/fund/merchantLists/list",
						data:{
							 "orderCode":this.orderCode,
							 "memberName":this.fundMerchantListQb.memberName,
							 "limit":this.fundMerchantListSet.pageTools.pageSize,
           		 "offset":(this.fundMerchantListSet.pageTools.pageNo-1)*this.fundMerchantListSet.pageTools.pageSize,
							 "orderStr":this.fundMerchantListQb.orderStr,
						}
					}).then((res) => {
							this.fundMerchantListSet.list = res.data.list;
							for(var i=0; i<this.fundMerchantListSet.list.length; i++){
								this.fundMerchantListSet.list[i].merchantListMoney = this.fundMerchantListSet.list[i].merchantListMoney.toFixed(2);
							}
							this.fundMerchantListSet.sumInfo = res.data.sumInfo;
              this.fundMerchantListSet.sumInfo.merchantListMoneySum = this.Public.formatMoney(this.fundMerchantListSet.sumInfo.merchantListMoneySum, 2);
							this.fundMerchantListSet.pageTools = res.data.pageTools;
							this.fundMerchantListSet.pageTools.pageSizeOptions = JSON.parse(this.fundMerchantListSet.pageTools.pageSizeOptions);
					}).catch((err)=>{
				      this.Public.openError(this,err.response.data)
			    });
      },
//-----------------------查询帮助信息-------------------------------------------
     query_systemTemplate(){
				this.axios({
					method:"GET",
					url:"/v3/system/templates/00100000005"
				}).then((res)=>{
						this.helpData.templateName = res.data.templateName;
						this.helpData.templateRemark = res.data.templateRemark;
						this.helpData.questionAndAnswerArray = res.data.questionAndAnswerArray;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)
				})
			},
    },
    created(){
    	 this.fundMerchantListSet.pageTools = this.$store.state.page;
    },
    mounted(){
//---------------------------打开页面渲染数据   start---------------------------
      this.queryByPage();
			this.query_systemTemplate(); //帮助功能
//---------------------------点击下拉箭头旋转---------------------------
      document.querySelector('body').onclick = () => {
        if (this.allOrder == true) {
          this.allOrder = false;
        }
      };
			this.tableH = document.documentElement.clientHeight - 205;
    },
  }

</script>

<style scoped>
  @import "../../../assets/css/zijin.css";

  .selectB {
    float: left;
    line-height: 37px;
    display: block;
    margin: 0px 30px;
    color: #7b8aa1;
  }

  .selectSpan {
    display: block;
    float: left;
    line-height: 37px;
    color: #7b8aa1;
  }

  .selectSpan:hover {
    cursor: pointer;
    color: #13c19f;
  }

  .selectSpan em{
    display: inline-block;
    vertical-align: middle;
    margin-top: -3px;
    margin-right: 3px;
  }

  .selectSpan i {
    color: #13c19f;
    margin: 0px 6px;
  }

  .el-icon-close {
    font-size: 12px !important;
    display: block;
    float: left;
    line-height: 37px;
    padding: 0px 16px;
    color: #7b8aa1;
    margin-right: 20px;
  }

  .el-icon-close:hover {
    cursor: pointer;
    color: #13c19f;
  }

  .el-table {
    font-size: 12px;
  }

  p.kael {
    width: 1000px;
    color: red;
  }

  .p {
    text-indent: 10px;
    line-height: 30px;
    cursor: pointer;
  }

  .p em {
    position: relative;
    top: 2px;
    margin-right: 3px;
  }

  .p:hover {
    background: #eef1f9;
    color: #03B8CC;
  }

  .ziJin-conBox > .block {
    float: right;
    margin-top: 10px;
  }

  .ziJin-conBox {
    padding: 0px 14px;
  }

  .goTo:hover {
    color: #13c19f;
    cursor: pointer;
  }

  .el-input__inner {
    border-radius: 50%;
  }

  section {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  div.location {
    flex: 0 0 10px;
    padding: 3px 0 15px 0;
  }

  div.content {
    position: relative;
    flex: 1;
    width: 100%;
    background-color: #fff;
  }

</style>
